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

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

javascript

使用javascript突出显示静态HTML页面上的给定字符串,javascript,Javascript,有一个静态HTML文件： <html> <body> ABC XYZ foo bar </body> </html> 我们的问题是：我如何将按钮/链接放入这个静态HTML文件中，以便访问此页面的用户在单击页面上的按钮/链接后可以突出显示给定的预定字符串？使用javascript？但是怎么做呢更新：将上述HTML中的ABC放入如下标记中： ABC有几种方法可以做到这一点 A.使用纯javascript，您可以尝试以下操作： 1-有一个变量，其中包

有一个静态HTML文件：

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

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

更新：将上述HTML中的ABC放入如下标记中：

ABC

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

A.使用纯javascript，您可以尝试以下操作： 1-有一个变量，其中包含要突出显示的字符串

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

2-使函数高亮显示highlight变量中的字符串

2-在替换项中包含一个变量：

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

3-使用函数高亮显示highlight变量中的字符串，并将其绑定到click事件：

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

A.使用纯javascript，您可以尝试以下操作： 1-有一个变量，其中包含要突出显示的字符串

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

2-使函数高亮显示highlight变量中的字符串

2-在替换项中包含一个变量：

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

3-使用函数高亮显示highlight变量中的字符串，并将其绑定到click事件：

html

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

html

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

HTML:

JS:

HTML:

JS:

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

这里有一个

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

这里有一个

你试过这个吗：？对不起，我不是指选择文本，我想让它更容易被人眼看到！：你到底试过什么？到目前为止有没有关于答案的反馈？很快！需要一点时间吗？你试过这个吗：？对不起，我不是指选择文本，我想让它更容易被人看到！：你到底试过什么？到目前为止有没有关于答案的反馈？很快！需要一点时间吗？我的文本来自哪里？如果可以，请添加一把小提琴。我的文本来自哪里？如果可以，请添加一把小提琴。

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

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>
  <body>
    ABC
    XYZ
    foo
    bar
    ABC
    XYZ foo FOO Bar ABC
    <button class="highlight">ABC</button>
    <button class="highlight">FOO</button>
  </body>
</html>