[英]Split html by br, trim it and then add span tags
我正在嘗試按br標簽分割行,獲取以數字開頭的行,然后使用span標簽進行換行。
jQuery(document).ready(function($) { var brExp = /<br\\s*\\/?>/i; var swn = /^\\d/; var lines = $('.caption').html().split(brExp).filter(line => swn.test(line.trim())); jQuery.each(lines, function() { console.log(this); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> ROLLS:⠀<br> <li> ¼ cup warm water</li>⠀<br> <li>1 tablespoon active dry yeast</li>⠀<br> <li> 2 ¼ cups sharp cheddar cheese, shredded⠀</li><br>
我試過添加以下代碼this.text(jQuery(lines).wrap('<span itemprop="recipeIngredient"></span>'));
在console.log之后,但僅給出錯誤,提示無法讀取未定義的屬性“ ownerDocument”。
預期產量:
ROLLS:⠀<br>
<li><span itemprop="recipeIngredient">1 tablespoon active dry yeast</li><br>
<li><span itemprop="recipeIngredient">1 teaspoon sugar</span></li><br>
<li><span itemprop="recipeIngredient">2 ¼ cups sharp cheddar cheese, shredded</span></li><br>
請幫忙。
謝謝。
可以使用.split("<br>");
代替使用正則表達式.split("<br>");
在html上。 這會將br標簽之間的每個片段推入數組。
然后,您可以遍歷數組,查看第一個字符是否為數字。 我使用了jQuery的isNumeric ,還考慮了將小數字符轉換為ASCII碼並與之進行比較的方式。
接下來,只需創建跨度即可容納具有適當屬性和內部文本的新行,然后完成。
$(document).ready(function($) { let a = $("#recipe").html().split("<br>"); a.forEach(function(text) { if (text.trim().length === 0) return; let firstChar = text.trim()[0]; // char codes are for fractions ½, ¼, ¾ if ($.isNumeric(firstChar) || (firstChar.charCodeAt() >= 188 && firstChar.charCodeAt() <= 190)) { let $span = $('<span></span>').attr('itemprop', 'recipeIngredient').text(text); $("#result").append($span.prop('outerHTML') + "<br/>"); } }); });
.hide { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="recipe" class="hide"> ROLLS:⠀<br> ¼ cup warm water⠀<br> 1 tablespoon active dry yeast⠀<br> 1 teaspoon sugar⠀<br> 1 cup milk⠀<br> 4 tablespoons butter, melted⠀<br> 1 egg, beaten⠀<br> 2 teaspoons salt⠀<br> 3 cups all-purpose flour⠀<br> 1 cup barbecue sauce⠀<br> 2 ¼ cups sharp cheddar cheese, shredded⠀<br> ½ cup green onions, chopped⠀<br> </div> <div id="result">ROLLS:<br/></div>
更新 :對於您在評論中的問題。 如果要使用列表,則可以使用jQuery獲取所有li,並將它們包裝在一個范圍中,然后再將它們放置在結果div中
$(document).ready(function($) { let a = $("#recipe li") a.each(function(index, elem) { let text = $(elem).text(); if (text.trim().length === 0) return; let firstChar = text.trim()[0]; // char codes are for fractions ½, ¼, ¾ if ($.isNumeric(firstChar) || (firstChar.charCodeAt() >= 188 && firstChar.charCodeAt() <= 190)) { let $span = $('<span></span>').attr('itemprop', 'recipeIngredient').text(text); $("#result").append("<li>" + $span.prop('outerHTML') + "</li>"); } }); });
.hide { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="recipe" class="hide"> ROLLS:⠀ <ul> <li>¼ cup warm water⠀</li> <li>1 tablespoon active dry yeast⠀</li> <li>1 teaspoon sugar⠀</li> <li>1 cup milk⠀</li> <li>4 tablespoons butter, melted⠀</li> <li>1 egg, beaten⠀</li> <li>2 teaspoons salt⠀</li> <li>3 cups all-purpose flour⠀</li> <li>1 cup barbecue sauce⠀</li> <li>2 ¼ cups sharp cheddar cheese, shredded⠀</li> <li>½ cup green onions, chopped⠀</li> </div> <div>ROLLS:</div> <ul id="result"> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.