javascript - 我如何获取文本区域的行并将它们放入左右对齐的元素集中，每行在 ":"上拆分？

Question

我有一个文本区域，我想在每个“:”之后右对齐文本 例如:

Name:                                       Pepito
Lastname:                                    Perez
Id:                                      123456789
qwertyuuiopadsadfsafssffas:                      0

有没有办法用 css 做到这一点？ 另一种选择是使用 Js，但我找不到解决问题的好策略。我认为与此类似的东西可能会起作用。

$($("textarea")[0]).text().replace(/[^:]/g, "something here")

提前致谢!

Answer 1

你不能用带有 textarea 的 CSS 做到这一点，不。 JavaScript 方法相当简单，但使用 textarea 执行此操作似乎很奇怪，因为它们用于输入。

仍然:

const WIDTH = 50;

function format(ta) {
    ta.val(
        // Get the value
        ta.val()
        // Split into lines, then map each line
        .split(/[\r\n]+/).map(line => {
            // Split into left and right parts
            const match = /^\s*([^:]*:)\s*(.*)$/.exec(line);
            if (!match) {
                return line;
            }
            const [, left, right] = match;
            // Insert padding up to WIDTH
            const padding = " ".repeat(WIDTH - left.length - right.length);
            return left + padding + right;
        })
        // Join back into one string
        .join("\n")
    );
}

setTimeout(() => format($("#the-textarea")), 800);

<textarea rows="6" cols="50" id="the-textarea">Name: Pepito
Lastname: Perez
Id: 123456789
qwertyuuiopadsadfsafssffas: 0</textarea>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>