Фильтр входных данных textarea - PullRequest
0 голосов
/ 22 марта 2019

хочу добиться такой функции

  1. когда текстовая область отправляется в базу данных, разрывы строк удаляются (например, \ n -> "bar2019").
  2. данные экспортируются из базы данных и показывают, тот же эффект, что и у div.output (например, "bar2019" -> || \ n).

1: когда str + = "bar2019":

str = str.replace (/ bar2019 / g, "
");

может быть заменен только последний "bar2019"

2: когда str + = "\ n":

str = str.replace (/ \ n / g, "
");

все "\ n" могут быть заменены

function filterData(e) {
    str = this.value;

    if (e.keyCode === 13) {
        // error: bar2019 ?
        // str += "bar2019";
        // good: \n
        str += "\n";
    }

    console.log(this.value);
    // error: bar2019 ?
    // str = str.replace(/bar2019/g, "<br>");
    // good: \n
    str = str.replace(/\n/g, "<br>");
    dataOutput.innerHTML = str;
}

var dataInput = document.getElementById("dataInput"),
    dataOutput = document.getElementById("dataOutput"),
    str = "";

function filterData(e) {
    str = this.value;

    if (e.keyCode === 13) {
        // error: bar2019 ?
        // str += "bar2019";
        // good: \n
        str += "\n";
    }

    // console.log(this.value);
    // error: bar2019 ?
    // str = str.replace(/bar2019/g, "<br>");
    // good: \n
    str = str.replace(/\n/g, "<br>");
    dataOutput.innerHTML = str;
}

dataInput.addEventListener("change", filterData, false);
dataInput.addEventListener("input", filterData, false);
dataInput.addEventListener("keypress", filterData, false);
dataInput.addEventListener("keyup", filterData, false);
dataInput.addEventListener("plate", filterData, false);
.data-filter {
    width: 90%;
    margin: 20px auto;
    overflow: hidden;
}

.data-filter>textarea,
.data-filter>div {
    width: 48%;
    min-height: 300px;
    padding: 10px;
    border: 1px solid #aaa;
    float: left;
}

.data-filter>div {
    color: #f80;
}
<div class="data-filter">
    <textarea name="dataInput" id="dataInput" placeholder="Data input"></textarea>
    <div id="dataOutput"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...