Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Регулярное Выражение в Html . Очч надо (https://javascript.ru/forum/jquery/26370-regulyarnoe-vyrazhenie-v-html-ochch-nado.html)

Nigina 06.03.2012 12:22

Регулярное Выражение в Html . Игнорировать все что находится в <a> (кроме самого..
 
У меня вот такой пример :
<style> 
.highligt 
{ 
background:#FF3;     
} 
</style> 

<script type="text/javascript"> 

  function stripHTML(string) { 
    var pattern = new RegExp("\(Chocolate\)", "gi") 
     var replaceWith = "<span class='highligt'>$1</span>";  
         return string.replace(pattern, replaceWith); 
      } 

function testRegExp() 
{ 
    var text = '<a target="_blank" href="blabla dot ru/wiki/Chocolate" title="Chocolate">Chocolate</a> Chocolate Chocolate'; 
    document.writeln(stripHTML(text)); 
}


В итоге он выделяет все совпадение, что приводит к разрушению. Желательно пропустил совпадение внутри тега. Плизз Хелg ми.Ye jxx yflj :(

Pavel M. 07.03.2012 11:13

в вашем случае просто добавьте по пробелу в начало pattern и replaceWith
сделайте
var pattern = new RegExp(" \(Chocolate\)", "gi")
var replaceWith = " <span class='highligt'>$1</span>";

Nigina 07.03.2012 12:56

Спс за ответ, но решение не правильный. Наверно не правильно задала вопрос, надо игнорировать (не выделять, обойти тег) все что внутри тега <A> (href, title, id, class ...).

nikita.mmf 07.03.2012 14:30

на ум приходит только рекурсивный обход по DOM-дереву
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.highlight {
			background: yellow;
		}
	</style>
	<script type="text/javascript">
	var highlightText = (function(){
		var div = document.createElement("div");
		var replaceWith = '<span class="highlight">$1</span>';
		return function ( elem, re ) {
			var i = 0, node,
				nodeType = elem.nodeType,
				previousSibling;

			if ( nodeType ) {
				if ( nodeType === 1 || nodeType === 9 ) {
					for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
						previousSibling = elem.previousSibling;
						if ( previousSibling && (previousSibling.nodeType === 3 || previousSibling.nodeType === 4) && previousSibling.nodeValue === '' ) {
							previousSibling.parentNode.removeChild( previousSibling );
						}
						highlightText( elem, re );
					}
				} else if ( (nodeType === 3 || nodeType === 4) && re.test( elem.nodeValue ) ) {
					div.innerHTML = elem.nodeValue.replace( re, replaceWith );
					while ( div.firstChild ) {
						elem.parentNode.insertBefore( div.removeChild(div.firstChild), elem );
					}
					elem.nodeValue = '';
				}
			} else {
				for ( ; (node = elem[i++]); ) {
					if ( node.nodeType !== 8 ) {
						highlightText( node, re );
					}
				}
			}
		}
	})();
	var unHighlightText = function ( elem ) {
		var i = 0, node,
			nodeType = elem.nodeType,
			highlightNodeList, highlightNode;

		if ( nodeType ) {
			if ( nodeType === 1 || nodeType === 9 ) {
				highlightNodeList = elem.getElementsByTagName("span");
				for ( ; (highlightNode = highlightNodeList[i++]); ) {
					if ( (" " + highlightNode.className + " ").indexOf(" highlight ") > -1 ) {
						highlightNode.parentNode.replaceChild( document.createTextNode(highlightNode.firstChild.nodeValue), highlightNode );
						i--;
					}
				}
			}
		} else {
			for ( ; (node = elem[i++]); ) {
				if ( node.nodeType !== 8 ) {
					unHighlightText( node, re, replaceWith );
				}
			}
		}
	};
	</script>
</head>
<body>
	<div id="test">
		Chocolate Lorem lipsum dollar Chocolate Chocolate
		<a href="Chocolate" title="Chocolate">&gt;Chocolate Chocolate!</a>Chocolate <span class="Chocolate">Lorem lipsum dollar</span>
		<p>Chocolate Lorem lipsum dollar Chocolate</p>
		<ul id="Chocolate">
			<li>Chocolate Lorem lipsum dollar</li>
		</ul>
	</div>
	<button onclick='highlightText ( document.getElementById("test"), new RegExp( "("+"Chocolate" + ")", "g" ) )'>Highlight</button>
	<button onclick='unHighlightText( document.getElementById("test"))'>Unhighlight</button>
</body>
</html>

рони 07.03.2012 16:18

Nigina,
Вариант ...
<!DOCTYPE html>
<html>
<head>
  <title></title>
<style>
.highligt
{
background:#FF3;
}
</style>
</head>
<body>
<script type="text/javascript">
var text = 'Chocolate Chocolate <a target="_blank" href="blabla dot ru/wiki/Chocolate " title="Chocolate">Chocolate</a> Chocolate Chocolate';
text = text.replace(/(Chocolate)(?=[^>]*?<|[^>]*?$)/gi, "<span class='highligt'>$1</span>" );
document.write(text);
</script>
</body>
</html>

Pavel M. 07.03.2012 16:44

вариант с негативным просмотром вперед
<!DOCTYPE html>
<html>
<head>
  <title></title>
<style>
.highligt
{
background:#FF3;
}
</style>
</head>
<body>
<script type="text/javascript">
var text = 'Chocolate Chocolate <a target="_blank" href="blabla dot ru/wiki/Chocolate " title="Chocolate">Chocolate</a> Chocolate Chocolate';
text = text.replace(/(Chocolate)(?![^<]+>)/gi, "<span class='highligt'>$1</span>" );
document.write(text);
</script>
</body>
</html>

Nigina 07.03.2012 18:46

рони, Pavel M. спс огромное. Работает отлично. Я с RexExp-ом на Вы, а здесь все понятно и легко.


Часовой пояс GMT +3, время: 13:46.