在HTML文本框中查找某些子字符串，然后用其他字符串替换它们

Look through a HTML textbox for certain substrings, then replace them with other strings

本文关键字：字符串 然后 替换 其他 文本 HTML 查找      更新时间：2023-09-26

我正在为一位在工作中填写表格的家庭成员制作一款应用程序。这需要她一次填写很长的文本，这会变得重复和烦人。我有过写短代码名的想法（比如"GDS"代表"良好的国内标准"）。我希望程序在文本框中搜索某些（定义的）代码名，并用它们的"正确含义"替换它们。到目前为止，我有这个：

<html>
<style type="text/css">
h1.title
{
    font-size: 80px;
    font-family: "Verdana";
    font-weight: bolder;
}
body
{
    background: rgb(200,400,200);
}
p.main
{
    font-size: 31px;
    font-family: "Verdana";
    font-weight: bold;
    text-align: left;
}
textarea
{
    width: 1000px;
    height: 600px;
}   
</style>
<script type="text/javascript">
function getBoxText()
{
    var boxText = document.getElementById("textBox").value // Get what's in the TextBox.
    document.getElementById("bottomText").innerHTML = boxText
}
</script>
<head>
    <h1 align="middle" class="title">Test Page for BoxScan</h1>
</head>
<body>
    <p class="main">Welcome to BoxScan Test Page!</p>
    <textarea id="textBox">Input your text here!</textarea>
    <br>
    <button onclick="getBoxText()">Submit</button>
    <br>
    <h1 id="bottomText">Blank</h1>
</body>

</html>

显然，这一点是有问题的部分：

var boxText = document.getElementById("textBox").value // Get what's in the TextBox.
document.getElementById("bottomText").innerHTML = boxText

这是有效的，但现在我该如何浏览并替换我想要的字符串？让我们以GDS为例，它的意思是Good Domestic Standard。

您可以使用字符串对象的replace方法：http://www.w3schools.com/jsref/jsref_replace.asp

您必须使用正则表达式来替换所有出现的项。

var boxText = document.getElementById("textBox").value // Get what's in the TextBox.
var newBoxText = boxText.replace(/Initial/g, "Updated");
document.getElementById("bottomText").innerHTML = newBoxText

http://jsfiddle.net/rny94z4j/

根据您的需要，我会在缩写形式和扩展形式之间创建一个映射，并使用String.replace()替换找到的缩写。

有了这个映射，您还可以轻松地添加新的映射，也可以轻松地让用户保存自己的映射。（使用LocalStorage、IndexedDB或类似软件）

var mapping = {};
mapping['GDS'] = 'Good Domestic Standard';
mapping['PHP'] = 'Personal Home Page';
mapping['JS'] = 'JavaScript';
document.getElementById('replace').addEventListener('click', function(evt) {
  var newString = (function(map, oldString) {
    Object.keys(map).forEach(function(key) {
      oldString = oldString.replace(new RegExp('''b' + key + '''b', 'g'), map[key]);
    });
    return oldString;
  }(mapping, document.getElementById('input').value));
output.value = newString;
});
textarea {
  width: 600px;
  height: 120px;
  border: 3px solid #cccccc;
  padding: 5px;
}
<button id="replace">Replace</button>
<p>
  Original Text:
  <textarea id="input">GDS in the beginning, inthePHPmiddle, but PHP works. Also, JS. GDS for good measure.</textarea>
</p>
<p>
  New Text:
  <textarea id="output"></textarea>
</p>

您将使用replace方法：

boxText = boxText.replace(/'bGDS'b/g, 'Good Domestic Standard');

'b匹配一个单词边界，因此它计算独立的代码名称，而不是作为另一个单词的一部分。

要替换多个字符串，可以使用与任何字符串匹配的模式，并使用回调函数选择替换：

boxText = boxText.replace(/'b(GDS|ADS|PDS)'b/g, function(m){
  switch (m) {
    case 'GDS': return 'Good Domestic Standard';
    case 'ADS': return 'Average Domestic Standard';
    case 'PDS': return 'Poor Domestic Standard';
  }
});

演示：

var boxText = "GDS, ADS, PDS";
boxText = boxText.replace(/'b(GDS|ADS|PDS)'b/g, function(m){
  switch (m) {
    case 'GDS': return 'Good Domestic Standard';
    case 'ADS': return 'Average Domestic Standard';
    case 'PDS': return 'Poor Domestic Standard';
  }
});
// show result in Stackoverflow snippet
document.write(boxText);

没有测试，但这应该可以做到：

function getBoxText() {
// store strings in object to have them easily maintainable
var strings = {
    'GDS' : 'Good Domestic Standard',
    'GTA' : 'Grand Theft Auto',
    'FUBAR' : 'fucked up beyond all recognition'
};
var boxText = document.getElementById("textBox").value;
for (var shortcode in strings) {
    boxText = boxText.replace(shortcode,strings[shortcode]);
}
document.getElementById("bottomText").innerHTML = boxText;
}
相关文章：