RegExp-在搜索中替换`html`标记并突出显示

Question

I am doing a search and highlight process using regex , the problem i am facing is, it's accounts the html tags too search option.

since the html element replaces, i am getting bad result. how to avoid this?

here is my patter to search and replace the html text to mark tag.

 var src_str = $("#test").html(); var origional = $("#backup").html(); var searchIt = function (text) { console.log(text); var marks = text; marks = marks.replace(/(\\s+)/,"(<[^>]+>)*$1(<[^>]+>)*"); var pattern = new RegExp("("+marks+")", "gi"); src_str = src_str.replace(pattern, "<mark>$1</mark>"); src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\\/mark>)/,"$1</mark>$2<mark>$4"); $("#test").html(src_str); } var resetIt = function (Text) { $("#parent").html(origional); if(!Text.length) return; searchIt(Text); } $('#keyWord').keyup(function (e){ var inputText = $.trim($(e.target).val()); resetIt(inputText); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> <div id="test"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <script type="text/template" id="backup" > <div id="test"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </script> <input type="text" id="keyWord" /> <button>Reset </button> 

Answer 1

So it seems like your problem is that you're inserting <mark>...</mark> tags around your search results to highlight them and later matches can't match around these as well?

I was able to get it working like this:

 var src_str = $("#test").html(); var origional = $("#backup").html(); var searchIt = function (text) { console.log(text); var marks = text; marks = marks.replace(/(\\s+)/,"(<[^>]+>)*$1(<[^>]+>)*"); var pattern = new RegExp("("+marks+"+(?=[^>]*(?:<|\\Z)))", "gi"); src_str = src_str.replace(/<\\/?mark.*?>/gi,"") src_str = src_str.replace(pattern, "<mark>$1</mark>"); src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\\/mark>)/,"$1</mark>$2<mark>$4"); $("#test").html(src_str); } var resetIt = function (Text) { $("#parent").html(origional); if(!Text.length) return; searchIt(Text); } $('#keyWord').keyup(function (e){ var inputText = $.trim($(e.target).val()); resetIt(inputText); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> <div id="test"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <script type="text/template" id="backup" > <div id="test"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </script> <input type="text" id="keyWord" /> <button>Reset </button>