如果满足条件，则查找子字符串

Question

我可以在一个字符串中访问大量的HTML：

struct b

我正在尝试仅使用字符串解析来更新此HTML。具体来说，我希望在找到特定子字符串后找到第一个 div 结束元素：

const { body_html } = this.props.product_page;。

挑战是product.description的动态性质。第一个结束div product_page和子串结尾</div>

之间会有未知数量的字符

如何在找到产品描述变量之后在第一个结束div之后注入product.description？

编辑：我知道以这种方式修改HTML是不好的做法，但由于技术限制，这些是我必须满足的条件。此外，这不是纯HTML代码，而是实际的液体代码（嵌入式Ruby模板）。最后，我从未特别要求正则表达式。不能用子串的indexOf就足够了（或者技术上是同一个东西）？

Answer 1

Obligatory link。到目前为止，执行此操作的最佳方法是正确解析HTML：使用HTML解析器。毕竟，浏览器内置了一个。如果你尝试用简单的字符串处理来做到这一点，那么将咬你的可能性很大。

  

带子串的indexOf是否足够（或者技术上是同一个东西）？

不完全。 Officially，div的结束标记可以是</div>或</div >（其中该空格可以是任意数量的空格，包括换行符，制表符等）。实际上，浏览器也容忍/和div之间的空白。

因此，您需要一个正则表达式来查找结束标记。类似的东西：

var str = "testing product.description }}\n</div\n\t >";
var match = /(product\.description[\s\S]*?)<\/\s*div\s*>/.exec(str);
console.log("Original string: " + str);
if (match) {
  var index = match.index + match[1].length;
  console.log("It's at index " + index);
  str = str.substring(0, index) +
        "<div>Hello, world!</div>" +
        str.substring(index);
  console.log("New string: " + str);
} else {
  console.log("Not found");
}

.as-console-wrapper {
  max-height: 100% !important;
}

该正则表达式允许在结束</div>标记中使用空格，并为您提供之前匹配部分的长度，因此您可以插入字符串。

其中一个稍微棘手的部分是[\s\S]*?部分，它基本上是.*?（可选地匹配任意数量的任何字符），但它包含换行符，而.则没有。 （[\s\S]表示“任何空格或非空白字符。”

Answer 2

这是一个小工作的想法。

假设您有以下html字符串

var searchString = "SearchString";

，您的搜索字符串是

myStr.indexOf()

现在首先使用myStr.substr(myStr.indexOf(searchString),myStr.length).indexOf('</div>') 查找此字符串的索引并使用它进行子串直到结束并找到最近出现的''

 <div id="bladdiv<%=divcount%>" style="display: none; height: 750px; width: 1020px; overflow-y: auto">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <table>
          <tr>
            <td style="width:100px"></td>
            <td>
              <table id="Table_calc" cellspacing="1" cellpadding="1" width="102">
                <tr>
                  <div class="heading">Amortization Calculation</div>

                </tr>
                <tr>
                  <td valign='top' width="250px">Total numbers of amortization</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>
                </tr>
                <tr>
                  <td valign='top' width="250px">Interest rate %</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>
                </tr>
                <tr>
                  <td valign='top' width="250px">Amortization per year</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>

                </tr>
                <tr>
                  <td valign='top' width="250px">Interest per year</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>

                </tr>
              </table>

            </td>
            <td style="width:150px"></td>
            <td>
              <table id="Table_calc" cellspacing="1" cellpadding="1" width="102">
                <tr>
                  <div class="heading">Amortization Calculation</div>

                </tr>
                <tr>
                  <td valign='top' width="250px">Total numbers of amortization</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>
                </tr>
                <tr>
                  <td valign='top' width="250px">Interest rate %</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>
                </tr>
                <tr>
                  <td valign='top' width="250px">Amortization per year</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>

                </tr>
                <tr>
                  <td valign='top' width="250px">Interest per year</td>
                  <td>
                    <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
                  </td>

                </tr>
              </table>
            </td>
          </tr>
        </table>

      </td>


    </tr>
    <tr>
      <td style="width:400px" valign="top">
        <table id="Table_OwnersTogether" cellspacing="1" cellpadding="1" width="1020">


          <tr>
            <th style="width: 400px" valign='top'>Income Details</th>


            <th style="width:400px">2018
              <!-- Faktiska ränta-->
            </th>
            <th width="13px">2019
              <!-- Kalkylränta-->
            </th>
            <th width="13px">2020
              <!-- Faktiska ränta-->
            </th>
            <th width="13px">2021
              <!-- Kalkylränta-->
            </th>
            <th width="13px">2022
              <!-- Faktiska ränta-->
            </th>
            <th width="13px">2023
              <!-- Kalkylränta-->
            </th>
            <th width="13px">2024
              <!-- Faktiska ränta-->
            </th>
            <th width="13px">2025
              <!-- Kalkylränta-->
            </th>
            <th width="13px">2026
              <!-- Faktiska ränta-->
            </th>
            <th width="13px">2027
              <!-- Kalkylränta-->
            </th>


          </tr>
          <!-- Inkomst före skatt -->
          <tr>
            <td style="width:250px" valign='top'>Val</td>
            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1  %>'>
            </td>
            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_YEARLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1  %>'>
            </td>
            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1" value='<%= MAN_KNID_OSS_GROSS_MONTHLY_INCOME_HH_1  %>'>
            </td>


          </tr>
          <!-- Skatt -->
          <tr>
            <td style="width:250px" valign='top'>val2</td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_YEARLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_YEARLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_YEARLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_YEARLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width:13px" name="MAN_KNID_MONTHLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_MONTHLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_MONTHLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_MONTHLY_INCOME_TAX_HH_1  %>'>
            </td>
            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_YEARLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_YEARLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_YEARLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_YEARLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_MONTHLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_MONTHLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_MONTHLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_MONTHLY_INCOME_TAX_HH_1  %>'>
            </td>
            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_MONTHLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_MONTHLY_INCOME_TAX_HH_1  %>'>
            </td>

            <td>
              <input readonly style="background-color: <%=slskb_color5%>;" type="text" style="width: 13px" name="MAN_KNID_MONTHLY_INCOME_TAX_HH_1" value='<%= MAN_KNID_MONTHLY_INCOME_TAX_HH_1  %>'>
            </td>


          </tr>
          <!-- Skattefria inkomster -->

        </table>
      </td>
    </tr>

  </table>
</div>

现在你有了索引，你必须插入你的字符串。把它插入那里你很高兴

here对你来说是个傻瓜

Answer 3

首先，这不是一个好习惯。你绝对应该尝试使用HTML解析器。

但只是回答你的问题，下面是同一个

的示例代码

var mySearchStr = "<div> Test String 1 </div><div> myString is this </div><div> New string should be before this </div>";

var searchStrIndex = mySearchStr.indexOf("myString");

var closingDivIndex = mySearchStr.indexOf("</div>", searchStrIndex + 1); // Div after the first occurence of search string

var firstPart = mySearchStr.substring(0, closingDivIndex + 6);  // 6 is the length of </div>

var secondPart = mySearchStr.substring(closingDivIndex + 6);

var finalString = firstPart + "<div> My New content </div>" + secondPart;

alert(finalString);

使用正则表达式可能有更好的方法。但我不是那里的专家。

Plunker