JavaScript如何用最少代码提取指定字符串中的目标子串？

哎，这个需求太常见了！你说的用indexOf定位截取的思路完全可行，而且代码量真的非常少，先来给你上最直接的实现：

首先明确你的原始字符串：

var myString = '<p><i class="someclass"></i><img scr="somesource"/><img class="somefunnyclass" id="{{appName}}someExtraStuff.fileExt"/></p>';

方法一：用indexOf + slice实现（完全贴合你的思路） #

// 先找到{{appName}}的位置，算出目标内容的起始点
const start = myString.indexOf('{{appName}}') + '{{appName}}'.length;
// 从起始点开始找最近的"/>，作为结束点
const end = myString.indexOf('"/>', start);
// 截取中间部分就是目标内容
const target = myString.slice(start, end);

要是追求极致精简，还能写成一行：

const target = myString.slice(myString.indexOf('{{appName}}') + 11, myString.indexOf('"/>', myString.indexOf('{{appName}}')));

（这里的11是{{appName}}的字符长度，直接写数字比调用.length少几个字符，适合想省代码的场景）

这个思路的核心就是：精准锚定{{appName}}的结束位置，再锁定后面最近的"/>作为截断点，中间的内容就是你要的someExtraStuff.fileExt。

方法二：正则表达式实现（更健壮） #

如果担心字符串里有其他干扰的"/>，或者想适配更灵活的场景，用正则也很简洁：

const matchResult = myString.match(/{{appName}}([^"]+)/);
const target = matchResult ? matchResult[1] : '';

正则的逻辑是：匹配{{appName}}后面所有不是双引号的字符（毕竟id属性值是用双引号包裹的），捕获组里的内容就是我们要的片段。这种方法不用纠结后面的"/>，直接取到属性值本身，容错性更强一点。

两种方法的代码量都极少，完全能满足你的需求～

内容的提问来源于stack exchange，提问作者jacky