我需要找到一个字符，并用HTML标记包装它后面的单词

Question

在我用Jekyll生成的列表中，我需要用强标签包装某些单词。我的想法是使用分隔符

<li>100g of |sugar</li>

会变成

<li>100g of <strong>sugar<strong></li>

该列表由YAML中的数组生成，

ingredients:
  -name: 100 grams of |sugar

Answer 1

这里的问题是强标记没有闭合，所以您可以在列表中使用类似以下内容：

ingredients:
     -name: 100 grams of %strongo%sugar%strongc%

然后在jquery脚本中使用以下代码：

str = str.replace("%strongo%","<strong>");
str = str.replace("%strongc%","</strong>");

然后它将被转换为：

<li>100g of <strong>sugar</strong></li>

Answer 2

您可以简单地在前面的内容中使用markdown：

---
layout: page
title: recipe

ingredients:
  - 100 grams of **sugar**
  - 200 grams of **floor**
---

<ul>
{%for ingredient in page.ingredients %}
    <li>{{ingredient | markdownify}}</li>
{% endfor %}
</ul>

完成了！

Answer 3

给定以下HTML：

<ul class="ingredients">
    <li>100g of |sugar</li>
    <li>50ml of |creme fraiche</li>
    <li>200g of |strong plain flour</li>
    <li>3 |free range eggs</li>
    <li>2 |turtle doves</li>
    <li>1 |partridge, in a |pear tree</li>
</ul>

以下jQuery似乎可以正常工作：

// iterates over the 'li' elements within the element(s) of class 'ingredients',
// uses the anonymous function of the html() method,
// the first argument ('i') is the index of the current element in the collection,
// the second ('h') is the found html:
$('.ingredients li').html(function(i,h){
    // we call replace() on the found-html,
    // finding the | character (escaped because in a regex it's an OR special character),
    // followed by a sequence of one, or more, alphanumerics, until a character
    // is found from the second set (the ^ is the NOT operator, within character-classes:
    return h.replace(/\|([\w][^|,.:?()_]+)/g,'<strong>$1</strong>');
});

​

$('.ingredients li').html(function(i, h) {
  return h.replace(/\|([\w][^|,.:?()_]*)/g, '<strong>$1</strong>');
});

.ingredients {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  padding-left: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ingredients">
  <li>100g of |sugar</li>
  <li>50ml of |creme fraiche</li>
  <li>200g of |strong plain flour</li>
  <li>3 |free range eggs</li>
  <li>2 |turtle doves</li>
  <li>1 |partridge, in a |pear tree</li>
</ul>

​

参考文献：

• JavaScript Regular Expressions.
• String.prototype.replace().

：

• JavaScript

​

• html().

：

• jQuery

​