使用javascript突出显示静态HTML页面上的给定字符串

Highlight given strings on a static HTML page with javascript

本文关键字：字符串 HTML javascript 显示 静态 使用      更新时间：2023-09-26

有一个静态HTML文件：

<html>
<body>
ABC
XYZ
foo
bar
</body>
</html>

我们的问题：我如何将按钮/链接（？）放在这个单一的静态HTML文件中，以便访问此页面的人在点击页面上的按钮/链接后可以突出显示给定的预定字符串？使用javascript？但是怎么做呢？

更新：将上面HTML中的"ABC"放入<big><b>标签中，如：<big><b>ABC</b></big>

有几种方法可以做到这一点。

a。使用纯javascript，您可以尝试以下操作：

1-有一个变量，其中有你想要突出显示的字符串。

highlight = ['ABC', 'XYZ', ... ];

2-使函数突出显示highlight变量中的字符串

makeHL = function(strings) {
    // Get the HTML you want to search and replace strings on
    myHTML = document.getElementsByTagName('body')[0].innerHTML;
    // Use string.replace to add <b></b> to them or another form of highlighting. 
    // You can use regular expressions here to make it more reliable.
    strings.forEach(function(str) {
        myHTML = myHTML.replace(str, '<b>' + str + '</b>');
    });
    // Reinsert your new html with the strings highlighted.
    document.getElementsByTagName('body')[0].innerHTML = myHTML
}

3-当用户点击您的链接或按钮时，只需调用makeHL(highlights)

jsFiddle在这里

确保您包含一个Ecmascript5填充程序，如es5填充程序以在不支持.forEach()的浏览器中使用。

b。使用像jQuery这样的库，可以更容易地解决浏览器不兼容的问题：

1-在代码的其余部分之前包括jQuery：

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

2-有一个变量与你的替代品：

highlight = ['ABC', 'XYZ', ... ];

3-制作一个函数，突出显示highlight变量中的字符串，并将其绑定到click事件：

$('.makeHL').on('click', function() {
    // Get the HTML you want to search and replace strings on
    myHTML = $('body').html();
    // Use string.replace to add <b></b> to them or another form of highlighting. 
    // You can use regular expressions here to make it more reliable.
    $.each(highlight, function(i, str) {
        myHTML = myHTML.replace(str, '<b>' + str + '</b>');
    });
    // Reinsert your new html with the strings highlighted.    
    $('body').html(myHTML);
});

jsFiddle此处

工作示例

HTML:

<p>
  <button class="highlight-text">Highlight "ABC"</button>
</p>
ABC
XYZ
foo
bar

JS:

(function(){
  function highlightText(textToHighlight) {
    var searchExpression;
    searchExpression = new RegExp('(' + textToHighlight + ')', 'g');
    document.body.innerHTML = document.body.innerHTML.replace( searchExpression, '<b>$1</b>' );
  }
  document.querySelector('.highlight-text').addEventListener(
    'click',
    function(){ highlightText('ABC'); },
    false
  );
})();

http://jsfiddle.net/medda86/9g8XD/

html

ABC
XYZ
foo
bar
<button class="button">Button</button>

Jquery

var predefinedStrings = new Array('ABC','bar');
var arrLength = predefinedStrings.length;
$('.button').click(function(){
    for (var i = 0;i < arrLength;i++){
        $('body').html($('body').html().replace(predefinedStrings[i],'<b>'+predefinedStrings[i]+'</b>'));
    }
});

我建议使用Jquery javascript库

JQUERY

function highlight(word,content){
    //gi makes the replace recursive and case insensitive
    var regex = new RegExp( '(' +word+ ')', 'gi' );
    return content.replace( regex, bold );
}
function unhighlight(word,content){
    var regex = new RegExp( '(' +bold(word)+ ')', 'gi' );
    return content.replace( regex, strip );
}
function bold(word){
    return "<b>"+word+"</b>";
}
function strip(word){
    return word.replace("<b>","").replace("</b>","");
}
highlighted = null;
$(document).ready(function (){
  $("body").delegate(".highlight","click",function (e){
      var word = $(this).text();
      var container = $("body");
      var content = container.html();
      if(highlighted!=word){
        //this is optional if you would like to unhighlight prev selections
        content = unhighlight(highlighted,content);
        content = highlight(word,content);
        highlighted = word; 
        container.html(content);
      }
   });
});

HTML

<html>
  <body>
    ABC
    XYZ
    foo
    bar
    ABC
    XYZ foo FOO Bar ABC
    <button class="highlight">ABC</button>
    <button class="highlight">FOO</button>
  </body>
</html>

这是一个FIDDLE

相关文章：