javascript - 如何检测 标签中的换行符并在其后打印内容

Question

我有一个 p 里面有一些 span 指定当我看到它时文本的哪一部分必须用动画 div 加下划线，使用 scrollTop() 进行检测。

当所有文本都在同一行时没有问题但是当 span 中的文本有换行符时我不知道如何创建 div .

这是我的代码，我退出动画以简化。

	 var subrayados_offset = [];
	 var subrayados_element = [];
	 var subrayados_bg = [];
	 var subrayados_delay = 0;


	jQuery(document).ready(function(){
		$('.subrayado').each(function(index, element) {
			subrayados_offset[index] = $(this).offset().top;
			subrayados_element[index] = $(this);
			$(this).append("<div class='subrayado_bg' style='width:100%; height:100%; background-color:red; position:absolute; top: 0; left: 0; z-index:-1;'></div>");
			subrayados_bg[index] = $(this).find(".subrayado_bg");
		});
	});

			setInterval(function() {
		    	for (var i = subrayados_offset.length - 1; i >= 0; i--) {
		    		var sub_obj = subrayados_bg[i];
		    	//console.log(subrayados_bg[i]+" "+jQuery(window).scrollTop()+" "+puntoDesplegar);

		    		if (jQuery(window).scrollTop() >= subrayados_offset[i]-400 && jQuery(window).scrollTop() < subrayados_offset[i]) {
		    			//TweenMax.killTweensOf(sub_obj);
						//TweenMax.to(sub_obj, 0.5, {delay:subrayados_delay, width:"100%", ease:Power4.easeInOut});
		    		}
		    		else{
		    			//TweenMax.killTweensOf(sub_obj);
		    			//TweenMax.to(sub_obj, 0.5, {delay:subrayados_delay, width:"0%", ease:Power4.easeInOut});
		    		}
		    		subrayados_delay += 0.1;
		    	}
		    	subrayados_delay = 0;
				   	
			}, 500);

p{width: 300px;}
.subrayado{ position: relative; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span class="subrayado">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Curabitur ultricies ultrices enim in condimentum. Nullam sollicitudin varius enim sit amet rutrum. Nam consequat vitae dolor eu pharetra. <span class="subrayado">Morbi vestibulum felis tristique velit</span> varius maximus. Sed venenatis, velit fringilla viverra dictum, magna quam faucibus est, sed congue augue enim a sem. Cras ut tristique enim. Quisque aliquam risus vitae erat lacinia venenatis. </p>


HOW IT MUST BEE

<p><span class="subrayado">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Curabitur ultricies ultrices enim in condimentum. Nullam sollicitudin varius enim sit amet rutrum. Nam consequat vitae dolor eu pharetra. <span class="subrayado">Morbi vestibulum </span><span class="subrayado">felis tristique velit</span> varius maximus. Sed venenatis, velit fringilla viverra dictum, magna quam faucibus est, sed congue augue enim a sem. Cras ut tristique enim. Quisque aliquam risus vitae erat lacinia venenatis. </p>

我尝试使用 RegExp 选择换行符，但我不知道正确的查询。

Answer 1

使用 link 在换行符后创建一个 span由@Max Starkenburg 提供，这是我编写的代码:

if(current.text(current.text() + ' ' + words[i]).height() > height){
    current.text(current.text().split(words[i])[0] + '</span> <span class="subrayar">' + words[i]);
    height = current.height();
}

有了这个，在添加新词后，我检测高度，如果它更大(在下一行)，我拆分这个词并再次添加它但写了 span 标签.

在下面的代码片段中，您可以看到所有代码。

我添加了一个类来显示下一行中的 span。

var subrayados_offset = [];
	 var subrayados_element = [];
	 var subrayados_bg = [];


	jQuery(document).ready(function(){
		$('.subrayado').each(function(index, element) {
			var current = $(this);
		    var text = current.text();
		    
		    var words = text.split(' ');
		    
		    current.text(words[0]);
		    var height = current.height();
		    
		    for(var i = 0; i < words.length; i++){
		    	//console.log(height+" "+words[i]+" "+current.height()+" "+words[i+1]);
	        	if (i == 0) {
    				current.text(words[0]);
    			}
    			else{
    				if(current.text(current.text() + ' ' + words[i]).height() > height){
    					console.log(current.text().split(words[i])[0]);
			            current.text(current.text().split(words[i])[0] + '</span> <span class="subrayar other_span">' + words[i]);
			            height = current.height();
		    			
			        }		        		
    			}  
		    }
		    
		    $(this).html('<span class="subrayar">'+current.text()+'</span>');

			//$(this).html($(this).text().replace(/(\w+|\S+)/g, '</span>$1<span class="subrayado">'));
		});

		$('.subrayar').each(function(index, element) {
			subrayados_offset[index] = $(this).offset().top;
			subrayados_element[index] = $(this);
			$(this).append("<div class='subrayado_bg' style='width:100%; height:100%; background-color:red; position:absolute; top: 0; left: 0; z-index:-1;'></div>");
			subrayados_bg[index] = $(this).find(".subrayado_bg");
		});
	});

p{width: 300px;}
.subrayar{ position: relative; }
.other_span{ background-color: blue !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span class="subrayado">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Curabitur ultricies ultrices enim in condimentum. Nullam sollicitudin varius enim sit amet rutrum. Nam consequat vitae dolor eu pharetra. <span class="subrayado">Morbi vestibulum felis tristique velit varius maximus.</span> Sed venenatis, velit fringilla viverra dictum, magna quam faucibus est, sed congue augue enim a sem. Cras ut tristique enim. Quisque aliquam risus vitae erat lacinia venenatis. </p>