javascript - 检测 selectionStart 处的单词是否为 URL

Question

我正在尝试检测用户在关注 HTML 输入元素时点击的完整单词，然后查看它是否是 URL。我正在使用以下方法:

let el = this.reminderInput.nativeElement
var fullText = el.value;
console.log(fullText) //logs 'test http://www.google.com'

var split =  el.selectionStart
console.log(split) //logs 18
var a = fullText.substring(0, split).match(/[A-Za-z]*$/)[0]
var b = fullText.substring(split).match(/^[A-Za-z]*/)[0]

我的输入元素中有以下字符串:

test http://www.google.com

在此示例中，如果用户在 google 中的 o 之间单击，a 将打印出 go 和 b 将打印出 gle。

我希望 a 打印出 http://www.go 和 b 打印出 ogle。 com，因此，当我组合 a + b 时，我会得到完整的字符串 http://www.google.com 并检查它是否是一个有效的 URL，如果是，请在另一个选项卡中打开它。

如何更新我的正则表达式以仅检测单词是否不是空格/回车，以便我可以获得选择的完整单词并检查它是否是 URL？

Answer 1

这是一个总体思路:匹配所有非空白 block 但保留每个匹配项的索引。然后遍历匹配项，寻找最适合 target.selectionStart 的单词。从那里，它是一个 known problem检测该词是否为 URL。

const findWordUnderCursor = e => {
  const words = [];
  
  for (let m, re = /\S+/g; m = re.exec(e.target.value);) {
    words.push([m[0], m.index]);
  }
  
  const cursor = e.target.selectionStart;
  const target = words.find(([word, i]) => i + word.length >= cursor);  
  document.querySelector("#output").innerText = `{${target ? target[0] : ""}}`;
};

const inpElem = document.querySelector("input");
inpElem.addEventListener("keyup", findWordUnderCursor);
inpElem.addEventListener("click", findWordUnderCursor);
inpElem.addEventListener("blur", e => {
  document.querySelector("#output").innerText = ""; 
});

* { font-family: monospace; }

<input value="foo test http://www.google.com bar" size=40>
<div id="output"></div>

如果您正在使用框架(看起来您是)，请将 DOM 交互替换为框架的调用。

如果匹配和迭代整个输入的想法看起来不高效，您总是可以走指针路线并从选择开始向前和向后走，直到您在任一端点击空白:

const findWordUnderCursor = e => {
  let start = e.target.selectionStart;
  let end = start;
  const val = e.target.value;
  
  for (; start > 0 && /\S/.test(val[start-1]); start--);
  for (; end < val.length && /\S/.test(val[end]); end++);

  document.querySelector("#output").innerText = `{${val.slice(start, end)}}`;
};

const inpElem = document.querySelector("input");
inpElem.addEventListener("keyup", findWordUnderCursor);
inpElem.addEventListener("click", findWordUnderCursor);
inpElem.addEventListener("blur", e => {
  document.querySelector("#output").innerText = ""; 
});

* { font-family: monospace; }

<input value="foo test http://www.google.com bar" size=40>
<div id="output"></div>