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

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

img

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

<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]);
  }
});

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

纯粹的textarea肯定不行，得自己渲染，最简单的还是用通用的编辑器渲染，比如fkceditor、ueditor等等

单纯用一个input输入框估计难以实现，需要换成富文本编辑器或者用div来自定义实现。关键技术点就是#分割字符串以及样式赋值。

你可以通过监听输入框的change或者keydown事件，来实时获取用户输入的内容，然后判断是否存在符合要求的关键字 #话题，如果存在就把这个文字标红。

以下是一个简单的实现例子：

HTML部分:

<input id="input" placeholder="请在这里输入内容" />

JS部分：

const inputBox = document.getElementById('input');
inputBox.addEventListener('keyup', function (e) {
  const text = e.target.value;
  const pattern = /#([^\s]+)/g; // 匹配以#开始，后面不带空格的字符组成的字符串
  let html = text.replace(pattern, '<span class="highlight">$&</span>'); // 把符合条件的字符用<span>包裹
  inputBox.innerHTML = html; // 把修改后的html写入输入框
});

CSS部分：

.highlight {
  color: red; // 高亮颜色
}

这样就成功实现了高亮显示符合要求的关键字，并提取所有的标签的功能。

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Text Input with Keyword Highlight and Tag Extraction</title>
  <style>
    #highlight {
      color: red;
    }
    #input {
      border: 1;
    }
  </style>
</head>
<body>
  <div id="input" contenteditable="true" placeholder="请在这里输入内容"></div>
  <div id="tags"></div>

  <script>
    const inputBox = document.getElementById('input');
    const tagsBox = document.getElementById('tags');
    inputBox.addEventListener('input', function (e) {
      const text = e.target.innerText;
      const pattern = /#([^\s]+)/g; // 匹配以#开始，后面不带空格的字符组成的字符串
      let html = text.replace(pattern, '<span id="highlight">$&</span>'); // 把符合条件的字符用<span>包裹
      inputBox.innerHTML = html; // 把修改后的html写入输入框

      const tags = text.match(pattern); // 获取所有匹配的关键词
      if (tags) {
        const uniqueTags = [...new Set(tags)]; // 去重
        const tagsHtml = uniqueTags.map(tag => `<span>${tag}</span>`).join(''); // 生成HTML
        tagsBox.innerHTML = tagsHtml; // 把HTML写入标签框
      } else {
        tagsBox.innerHTML = ''; // 如果没有匹配的关键词，清空标签框
      }

      // Move cursor to the right
      const range = window.getSelection().getRangeAt(0);
      range.setStart(inputBox.childNodes[0], text.length);
      range.setEnd(inputBox.childNodes[0], text.length);
    });
  </script>
</body>
</html>

img


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Text Input with Keyword Highlight and Tag Extraction</title>
</head>
<body>
  <input type="text" id="textInput" onkeyup="highlightKeywords()" placeholder="请输入内容">
  <p id="output"></p>

  <script>
    function highlightKeywords() {
      const input = document.getElementById('textInput');
      const content = input.value;

      // 匹配话题标记，例如#话题
      const tagRegex = /#\S+/g;
      const tags = content.match(tagRegex);
      
      // 将话题标记替换为带有样式的红色文字
      const highlightedContent = content.replace(tagRegex, '<span style="color: red;">$&</span>');

      // 输出结果
      const output = document.getElementById('output');
      output.innerHTML = highlightedContent;

      // 提取所有标签
      console.log(tags);
    }
  </script>
</body>
</html>



HTML 代码：

<div class="input-box">
  <textarea id="input-text" placeholder="请输入内容"></textarea>
  <div class="tags-box">
    <span class="tag">标签1</span>
    <span class="tag">标签2</span>
    <span class="tag">标签3</span>
  </div>
</div>
CSS 代码：

.input-box {
  position: relative;
}

#input-text {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
}

#input-text:focus + .tags-box .tag {
  display: none;
}

#input-text:focus + .tags-box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  z-index: -1;
}

.tag {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #eee;
  color: #333;
}

.tag.red {
  background-color: red;
  color: #fff;
}
JavaScript 代码：

var inputText = document.getElementById("input-text");
var tagsBox = document.querySelector(".tags-box");

inputText.addEventListener("input", function() {
  var text = this.value;
  var tags = text.match(/#([\u4e00-\u9fa5a-zA-Z0-9_-]+)/g);
  tagsBox.innerHTML = "";
  if (tags) {
    for (var i = 0; i < tags.length; i++) {
      var tag = tags[i].slice(1);
      text = text.replace(tags[i], "<span class='tag red'>#" + tag + "</span>");
      tagsBox.innerHTML += "<span class='tag'>" + tag + "</span>";
    }
  }
  this.value = text;
});
以上代码实现了输入框的功能，当用户输入 # 之后的文本将被标红，并在下方标签区域中自动添加标签。请注意，此代码示例仅供参考，您需要根据实际情况进行适当调整。