javascript - Javaスクリプトを使用して、div内の特定の文字列のすべての出現を強調表示する方法は?

Question

文字列を選択して、特定の div 内の文字列のすべての出現箇所を強調表示する必要があります。単語を選択してボタンをクリックすると、div 内のすべての出現箇所を強調表示する必要があります。

例 - 私が選択した場合

クリケットはゲームです

クリケットはゲームのすべての出現を強調表示する必要があります。このクリケットはゲームまたはクリケット はゲームのようになる場合があります

Answer 1

TextRangeIE やwindow.find()他のブラウザーでを使用して、ブラウザーに面倒な作業をさせることができます。

この回答は、その方法を示しています。要素の境界を越えるテキストに一致し、 を使用して強調表示を行いますdocument.execCommand()。

あるいは、James Padolsey が最近、私が使用していないスクリプトを公開しましたが、役立つようです: http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/

Answer 2

mark.jsはこれにかなり適しているようです。これは、html の「文字列」を取得して検索文字列を強調表示する 3 行のフィドルです。

$(document).ready(function() {
    var html_string = "<b>Major Tom to groundcontrol.</b> Earth is blue <span> and there's something </span> i can do";

    var with_highlight = $("<div/>").html(html_string).mark("can");

    $("#msg").html(with_highlight);
})

jsfiddle へのリンク

Answer 3

このスクリプトを試すことができます

デモ

highlightSearchTermsこのスクリプトの関数では 、var bodyText = document.body.innerHTML;あなたのdividに置き換えられ、それがあなたのためにタスクを実行します..

/*
 * This is the function that actually highlights a text string by
 * adding HTML tags before and after all occurrences of the search
 * term. You can pass your own tags if you'd like, or if the
 * highlightStartTag or highlightEndTag parameters are omitted or
 * are empty strings then the default <font> tags will be used.
 */
function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) 
{
  // the highlightStartTag and highlightEndTag parameters are optional
  if ((!highlightStartTag) || (!highlightEndTag)) {
    highlightStartTag = "<font style='color:blue; background-color:yellow;'>";
    highlightEndTag = "</font>";
  }

  // find all occurences of the search term in the given text,
  // and add some "highlight" tags to them (we're not using a
  // regular expression search, because we want to filter out
  // matches that occur within HTML tags and script blocks, so
  // we have to do a little extra validation)
  var newText = "";
  var i = -1;
  var lcSearchTerm = searchTerm.toLowerCase();
  var lcBodyText = bodyText.toLowerCase();

  while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i+1);
    if (i < 0) {
      newText += bodyText;
      bodyText = "";
    } else {
      // skip anything inside an HTML tag
      if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
        // skip anything inside a <script> block
        if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
          newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
          bodyText = bodyText.substr(i + searchTerm.length);
          lcBodyText = bodyText.toLowerCase();
          i = -1;
        }
      }
    }
  }

  return newText;
}
/*
 * This is sort of a wrapper function to the doHighlight function.
 * It takes the searchText that you pass, optionally splits it into
 * separate words, and transforms the text on the current web page.
 * Only the "searchText" parameter is required; all other parameters
 * are optional and can be omitted.
 */
function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
{
  // if the treatAsPhrase parameter is true, then we should search for 
  // the entire phrase that was entered; otherwise, we will split the
  // search string so that each word is searched for and highlighted
  // individually
  if (treatAsPhrase) {
    searchArray = [searchText];
  } else {
    searchArray = searchText.split(" ");
  }

  if (!document.body || typeof(document.body.innerHTML) == "undefined") {
    if (warnOnFailure) {
      alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
    }
    return false;
  }

  var bodyText = document.body.innerHTML;
  for (var i = 0; i < searchArray.length; i++) {
    bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
  }

  document.body.innerHTML = bodyText;
  return true;
}

/*
 * This displays a dialog box that allows a user to enter their own
 * search terms to highlight on the page, and then passes the search
 * text or phrase to the highlightSearchTerms function. All parameters
 * are optional.
 */
function searchPrompt(defaultText, treatAsPhrase, textColor, bgColor)
{
  // This function prompts the user for any words that should
  // be highlighted on this web page
  if (!defaultText) {
    defaultText = "";
  }

  // we can optionally use our own highlight tag values
  if ((!textColor) || (!bgColor)) {
    highlightStartTag = "";
    highlightEndTag = "";
  } else {
    highlightStartTag = "<font style='color:" + textColor + "; background-color:" + bgColor + ";'>";
    highlightEndTag = "</font>";
  }

  if (treatAsPhrase) {
    promptText = "Please enter the phrase you'd like to search for:";
  } else {
    promptText = "Please enter the words you'd like to search for, separated by spaces:";
  }

  searchText = prompt(promptText, defaultText);

  if (!searchText)  {
    alert("No search terms were entered. Exiting function.");
    return false;
  }

  return highlightSearchTerms(searchText, treatAsPhrase, true, highlightStartTag, highlightEndTag);
}

Answer 4

これで始められるはずです：http://jsfiddle.net/wDN5M/

function getSelText() {
  var txt = '';
  if (window.getSelection) {
    txt = window.getSelection();
  } else if (document.getSelection) {
        txt = document.getSelection();
  } else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  document.getElementById('mydiv').innerHTML = document.getElementById('mydiv').innerHTML.split(txt).join('<span class="highlight">' + txt + '</span>');
}

参照: jQuery を使用してページ上の (テキストエリアではなく) 選択したテキストを取得する

要素の境界を越えて機能させたい場合は、コードをこれよりも複雑にする必要があります。jQueryは、必要な DOM トラバーサルと操作を行う際の作業を楽にしてくれます。

Answer 5

jQuery を使用して、div 内のすべての要素を反復処理し (div 内に他の要素があるかどうかはわかりません)、次に正規表現を使用して、貪欲な一致を実行して、テキスト内の選択された文字列のすべての出現箇所を見つけます。要素で。

Answer 6

まず、必要なテキストで必要な部分文字列を見つけて、それらを <span class="search-highlight"> でラップする必要があります。別の文字列を強調表示する必要があるたびに、すべての .search-highlight スパンを取得し、outerHtml を innerHtml に変換するだけです。したがって、コードは次のようになります。

function highLight(substring, block) {
   $(block).find(".search-highlight").each(function () {
      $(this).outerHtml($(this).html());
   });
   // now the block is free from previous highlights

   $(block).html($(block).html().replace(/substring/g, '<span class="search-highlight">' + substring + '</span>'));
}

Answer 7

<form id=f1 name="f1" action="" 
onSubmit="if(this.t1.value!=null && this.t1.value!='')
findString(this.t1.value);return false"
>
<input type="text" id=t1 name=t1size=20>
<input type="submit" name=b1 value="Find">
</form>
<script>
var TRange=null;

function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  // CODE FOR BROWSERS THAT SUPPORT window.find

  strFound=self.find(str);
  if (!strFound) {
   strFound=self.find(str,0,1);
   while (self.find(str,0,1)) continue;
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange();
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera browsers not supported, sorry...")
  return;
 }
 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}
</script>