js普通文本框实现高亮关键字

Question

说下我的需求，有一个输入框，用户可以往里面输入内容，用户可以给内容添加标签，当用户输入#话题 然后后面带上一个空格后，要把这个文字标红，同时还能提取所有的标签，如图所示

Answer 1

下面是一个简单的实现示例，仅供参考：

<input type="text" id="myInput">
<ul id="tagList"></ul>

// 获取输入框和标签列表
var input = document.getElementById("myInput");
var tagList = document.getElementById("tagList");

// 定义存储标签的数组
var tags = [];

// 监听输入框的输入事件
input.addEventListener("input", function() {
  // 获取输入框中的内容
  var content = input.value;
  
  // 使用正则表达式匹配 # 话题
  var pattern = /#\w+\s/g;
  var matches = content.match(pattern);
  
  // 遍历匹配结果，将匹配的文字标红并添加到标签列表
  if(matches) {
    for(var i = 0; i < matches.length; i++) {
      var match = matches[i];
      var tag = match.substring(1, match.length - 1);
      content = content.replace(match, "<span style='color: red;'>" + match + "</span>");
      if(tags.indexOf(tag) === -1) {
        tags.push(tag);
        tagList.innerHTML += "<li>" + tag + "</li>";
      }
    }
  }
  
  // 更新输入框的内容
  input.value = content;
});

// 监听标签列表的点击事件，提取对应的标签内容并展示在控制台
tagList.addEventListener("click", function(e) {
  var target = e.target;
  if(target.tagName === "LI") {
    var index = Array.prototype.indexOf.call(tagList.childNodes, target);
    console.log(tags[index]);
  }
});

这段代码实现了输入框中的文字匹配 # 话题并标红，同时将匹配到的标签添加到标签列表中，并且可以点击标签列表中的标签提取对应的标签内容。不过这段代码可能还需要根据您的具体需求进行调整。