使用 JavaScript 如何通過 ID 獲取此 HTML 元素內部的字符串？

Question

使用 JavaScript，我怎樣才能得到這個 HTML 元素內部的字符串，id 是 recItemString_GPLA\|input？ 在元素內部有一個我試圖捕獲的帶有“qty”（不帶引號）的字符串。 當我檢查我得到的元素時：

<input data-oj-internal="" type="text" readonly="" placeholder="" class="oj-inputtext-input oj- 
component-initnode" id="recItemString_GPLA|input"> == $0.

在 DevTools 中的那個元素之上有：

<oj-input-text :id="[[fieldId()]]" validators="[[validators]]" on-value- 
changed="[[valueChanged.bind($data)]]" on-valid-changed="[[validChanged]]" 
value="{{value}}" required="[[required]]" readonly="[[readOnly]]" messages- 
custom="[[messagesComputed]]" display-options="[[displayOptions]]" help=" 
[[help]]" id="recItemString_GPLA" class="oj-inputtext oj-form-control oj- 
component oj-read-only oj-complete"><input data-oj-internal="" type="text" 
readonly="" placeholder="" class="oj-inputtext-input oj-component-initnode" 
id="recItemString_GPLA|input"></oj-input-text>

我無法收集元素內的字符串以將其顯示到控制台。

使用插件 SelectorGadget 元素 XPath 為： //*[(@id = "recItemString_GPLA\|input")]

當我嘗試直接向控制台查詢 oj-input-text 時，控制台返回 [Object NodeList]

這是檢查元素的屏幕截圖：

Answer 1

使用 jQuery 您可以轉義如下特殊字符：

$('#recItemsString\\_GPLA\\|input');

Answer 2

我真的不確定應該生成哪個文本。 在下面的代碼片段中，我添加了一個要顯示的輸入值。

 const qs=s=>document.querySelector(s); console.log(qs('#recItemString\\_GPLA\\|input').value)

 <oj-input-text:id="[[fieldId()]]" validators="[[validators]]" on-value-changed="[[valueChanged.bind($data)]]" on-valid-changed="[[validChanged]]" value="{{value}}" required="[[required]]" readonly="[[readOnly]]" messages-custom="[[messagesComputed]]" display-options="[[displayOptions]]" help="[[help]]" id="recItemString_GPLA" class="oj-inputtext oj-form-control oj-component oj-read-only oj-complete"> <input data-oj-internal="" type="text" value="some text inside..." readonly="" placeholder="" class="oj-inputtext-input oj-component-initnode" id="recItemString_GPLA|input"> </oj-input-text>