Question

有一个静态HTML文件：

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

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

更新：放置＆＃34; ABC＆＃34;从上面的HTML到<big><b>标签，如： <big><b>ABC</b></big>

Answer 1

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

一个。使用普通的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 Here

请确保在.forEach()中包含一个Ecmascript5垫片，以便在不支持它的浏览器中使用<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>。

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

1-在其余代码之前加入es5-shim：

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

2-拥有替代品的变量：

highlight

3-制作突出显示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); });事件的函数：

{{1}}

jQuery

Answer 2

<强> Working example

<强> 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
  );
})();

Answer 3

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

Answer 4

我建议使用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

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

4 个答案:

一个。使用普通的javascript，你可以试试这个：

jsFiddle Here

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

jQuery