Question

我想知道是否可以使用JavaScript添加＆lt; div＆gt;标记HTML页面中的单词。

我有一个JS搜索，搜索一组HTML文件并返回包含该关键字的文件列表。我希望能够动态添加＆lt; div class =“highlight”＆gt;围绕关键字，所以它很突出。

如果执行备用搜索，则需要删除原始＆lt; div＆gt;并添加新的。有谁知道这是否可能？

任何提示或建议都会非常感激。

干杯，

劳里。

Answer 1

通常，您需要解析html代码，以确保您只突出显示关键字而不是隐藏文本或代码（例如图像的alt文本属性或实际标记）。 If you do as Jesse Hallett suggested：

$('body').html($('body').html().replace(/(pretzel)/gi, '<b>$1</b>'));

您会遇到某些关键字和文档的问题。例如：

<html>
<head><title>A history of tables and tableware</title></head>
<body>
<p>The table has a fantastic history.  Consider the following:</p>
<table><tr><td>Year</td><td>Number of tables made</td></tr>
<tr><td>1999</td><td>12</td></tr>
<tr><td>2009</td><td>14</td></tr>
</table>
<img src="/images/a_grand_table.jpg" alt="A grand table from designer John Tableius">
</body>
</html>

通过搜索单词“table”可以找到这个相对简单的文档，但是如果你只是用包装文本替换文本，你可能最终得到这个：

<<span class="highlight">table</span>><tr><td>Year</td><td>Number of <span class="highlight">table</span>s made</td></tr>

和此：

<img src="/images/a_grand_<span class="highlight">table</span>.jpg" alt="A grand <span class="highlight">table</span> from designer John <span class="highlight">Table</span>ius">

这意味着您需要解析HTML。解析HTML很棘手。但是，如果您可以对html文档进行一定的质量控制（即没有关闭尖括号等的开放角括号），那么您应该能够扫描文本，寻找可以是非标签的非属性数据。进一步，标记的。

以下是一些Javascript可以做到这一点：

function highlight(word, text) {
  var result = '';

  //char currentChar;
  var csc; // current search char
  var wordPos = 0;
  var textPos = 0;
  var partialMatch = ''; // container for partial match

  var inTag = false;

  // iterate over the characters in the array
  // if we find an HTML element, ignore the element and its attributes.
  // otherwise try to match the characters to the characters in the word
  // if we find a match append the highlight text, then the word, then the close-highlight
  // otherwise, just append whatever we find.

  for (textPos = 0; textPos < text.length; textPos++) {
    csc = text.charAt(textPos);
    if (csc == '<') {
      inTag = true;
      result += partialMatch;
      partialMatch = '';
      wordPos = 0;
    }
    if (inTag) {
      result += csc ;
    } else {
      var currentChar = word.charAt(wordPos);
      if (csc == currentChar && textPos + (word.length - wordPos) <= text.length) {
        // we are matching the current word
        partialMatch += csc;
        wordPos++;
        if (wordPos == word.length) {
          // we've matched the whole word
          result += '<span class="highlight">';
          result += partialMatch;
          result += '</span>';
          wordPos = 0;
          partialMatch = '';
        }
      } else if (wordPos > 0) {
        // we thought we had a match, but we don't, so append the partial match and move on
        result += partialMatch;
        result += csc;
        partialMatch = '';
        wordPos = 0;
      } else {
        result += csc;
      }
    }


    if (inTag && csc == '>') {
      inTag = false;
    }
  }
  return result;
}

Answer 2

使用jQuery包装非常简单：

$('span').wrap('<div class="highlight"></div>'); // wraps spans in a b tag

然后，删除，像这样：

$('div.highlight').each(function(){ $(this).after( $(this).text() ); }).remove();

听起来你必须做一些字符串拆分，所以换行可能不起作用，除非你想用一些标签预先包装你的所有单词（即。span）。

Answer 3

DOM API不提供超级简单的方法。据我所知，最好的解决方案是将文本读入JavaScript，使用replace进行所需的更改，然后将整个内容写回来。您可以一次执行一个HTML节点，也可以一次修改整个<body>。

以下是jQuery中的工作原理：

$('body').html($('body').html().replace(/(pretzel)/gi, '<b>$1</b>'));

Answer 4

你不能只是编写一个选择器来包装它吗？

$("* :contains('foo')").wrap("<div class='bar'></div>");

adam编写了上面的代码来执行删除：

$('div.bar').each(function(){ $(this).after( $(this).text() ); }).remove();

编辑：第二个想法，第一个语句返回一个元素，它将使用div标签包装元素，而不是唯一的单词。也许正则表达式替换会是一个更好的解决方案。

用于在内容周围添加HTML标记的JavaScript

4 个答案: