Question

我正在为一个家庭成员制作一个应用程序，这些成员填写表格作为她工作的一部分。它要求她一次填写大量文本，这变得重复和烦人。我有过写短代码的想法（比如“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

这有效，但现在我如何通过AND REPLACE查找我想要的字符串？我们使用GDS作为示例，这意味着Good Domestic Standard。

Answer 1

您可以使用字符串对象的替换方法：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/

Answer 2

您可以使用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);

Answer 3

根据您的需要，我将在缩写形式和扩展形式之间创建一个映射，并使用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>

Answer 4

未经测试，但这应该可以解决问题：

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;
}

查看某些子字符串的HTML文本框，然后将其替换为其他字符串

4 个答案: